import { useEffect, useState } from "react";
import { Radio, Button, Modal } from "antd";
import { CloseCircleOutlined, PlusCircleOutlined } from "@ant-design/icons";
import QrAddUser from "./add_user";
import { WorkWeek } from "@/components/func";
import { AttributeDescProps } from "@/components/render";

interface props {
  userType: number; // 客服在线类型
  setUserType: any; // 设置客服在线类型
  setKfData: any; // 设置客服数据
}

// 全天在线数据
let allDay: any = {
  type: 1,
  user: [],
};

// 自动上线数据
let auto: any = {
  type: 2,
  workCycles: [
    {
      id: 1,
      user: [],
      time: [],
      week: [],
    },
  ],
};

// 用来生产添加其他周期时的唯一标识
let id: number = 1;

const QrUser = ({ userType, setUserType, setKfData }: props) => {
  const [, setRender] = useState(0);
  const [visible, setVisible] = useState(false);
  let [addUser, setAddUser] = useState([]);

  // 每次切换在线类型
  const onChange = (e: any) => {
    window.globalState.muState("addUser", e.target.value === 1 ? allDay : auto);
    setUserType(e.target.value);
  };

  // 点击添加成员按钮，将当前选择的用户保存起来用于弹窗中已被选择的用户渲染
  const changeAddUser = (users: any) => {
    addUser = users;
    setAddUser(addUser);
  };

  // 获得选择的用户，用于向别的组件传递数据
  const getAddUser = (selectedUsers: any) => {
    let selectedAddUser = JSON.parse(JSON.stringify(selectedUsers));
    if (userType === 1) {
      allDay.user = selectedAddUser;
      window.globalState.muState("addUser", allDay);
    } else {
      auto.workCycles.map((item: any) => {
        if (item.id === id) {
          item.user = selectedAddUser;
          window.globalState.muState("addUser", auto);
        }
      });
    }

    setAddUser(selectedUsers);
  };

  // 添加自动上下线周期
  const addAutoWork = () => {
    let workCycles = auto.workCycles;
    id = workCycles[workCycles.length - 1].id + 1;
    let newCycle = {
      id,
      user: [],
      time: [],
      week: [],
    };
    workCycles.push(newCycle);
    setRender(Math.random() + 1);
  };

  useEffect(() => {
    setKfData(userType === 1 ? allDay : auto);
  }, [userType]);

  return (
    <div className="mb-24 flex items-start">
      <span className="title-item w-106 text-right mr-16">
        <span className="text-red-defalut relative top-4 text-lg">*</span> 客服人员:
      </span>
      <div className="flex flex-col items-start">
        <div className="mb-14">
          <Radio.Group onChange={onChange} value={userType}>
            <Radio value={1}>全天在线</Radio>
            <Radio value={2}>自动上下线</Radio>
          </Radio.Group>
        </div>

        {/* 全天 */}
        <section className={`w-658 rounded-sm ${userType === 1 ? "" : "none"}`}>
          <p>
            <Button
              icon={<span>+</span>}
              onClick={() => {
                changeAddUser(allDay.user);
                setVisible(true);
              }}>
              添加成员
            </Button>
            <span className="text-grey-400 mx-16">
              同一个二维码可选择多位客服成员进行接待，客户扫码后随机分配一名客服人员
            </span>
          </p>
          {/* 选择的用户渲染 */}
          <ul className="w-full flex flex-wrap mt-16">
            {allDay.user.map((item: any, index: number) => {
              return (
                <li
                  key={item.uid}
                  className="flex relative items-center justify-center text-grey-850 mr-14 mb-6 p-10 pr-16 bg-grey-100">
                  <img alt="" src={item.avatar} className="w-26 h-26 mr-8" />
                  <span className="absolute top-0 right-0 transform translate-x-2/4 -translate-y-1/2 cursor-pointer text-grey-400">
                    <CloseCircleOutlined
                      onClick={() => {
                        allDay.user.splice(index, 1);
                        window.globalState.muState("addUser", allDay);
                        setRender(Math.random() + 1);
                      }}
                    />
                  </span>
                  {item.name}
                </li>
              );
            })}
          </ul>
        </section>

        {/* 自动 */}
        <section className={`w-658 ${userType === 1 ? "none" : ""}`}>
          <AttributeDescProps
            attribute="自动上下线："
            desc={[
              "1、可用于员工早晚班等不同上班时间段使用;",
              "2、员工在非线上时间将不再接待新客户。",
            ]}
          />

          {/*  周期规则渲染 */}
          {auto.workCycles.map((item: any, index: number) => {
            return (
              <div
                className="w-634 min-h-160 border-1 border-grey-200 border-solid relative rounded-sm pt-16 pl-18 mb-16 bg-grey-fbfbfb"
                key={item.id}>
                {/* 员工选择 */}
                <div className="flex items-center mb-16">
                  <span className="li-title">员工选择：</span>
                  <Button
                    icon={<span>+</span>}
                    onClick={() => {
                      id = item.id;
                      changeAddUser(item.user);
                      setVisible(true);
                    }}>
                    添加成员
                  </Button>
                </div>
                {/* 选择的员工渲染 */}
                <ul className="w-full flex flex-wrap mt-16">
                  {item.user.map((userItem: any, userIndex: number) => {
                    return (
                      <li
                        key={userItem.uid}
                        className="flex relative items-center justify-center text-grey-850 mr-14 mb-6 p-10 pr-16 bg-grey-100">
                        <img alt="" src={userItem.avatar} className="w-26 h-26 mr-8" />
                        <span className="absolute top-0 right-0 transform translate-x-2/4 -translate-y-1/2 cursor-pointer text-grey-400">
                          <CloseCircleOutlined
                            onClick={() => {
                              item.user.splice(userIndex, 1);
                              window.globalState.muState("addUser", auto);
                              setRender(Math.random() + 1);
                            }}
                          />
                        </span>
                        {userItem.name}
                      </li>
                    );
                  })}
                </ul>
                {/* 规则周期渲染 */}
                <WorkWeek
                  id="week1"
                  setWeek={(e: any) => {
                    item.week = e;
                  }}
                  setTime={(e: any) => {
                    item.time = e;
                  }}
                />

                {/* 删除按钮 */}
                {auto.workCycles.length > 1 ? (
                  <div
                    className="cursor-pointer absolute -right-38 bottom-0 w-20 h20 rounded-2 flex items-center justify-center"
                    onClick={() => {
                      auto.workCycles.splice(index, 1);
                      setRender(Math.random() + 1);
                    }}>
                    <i className="iconfont icon-shanchu1"></i>
                  </div>
                ) : null}
              </div>
            );
          })}
          {/* 添加周期 */}
          <span
            className="text-blue-default cursor-pointer flex items-center"
            onClick={addAutoWork}>
            <PlusCircleOutlined />
            <span className="ml-8">添加其他工作周期</span>
          </span>
        </section>
      </div>
      {/* 添加员工弹出框 */}
      <Modal
        closable={false}
        maskClosable={false}
        visible={visible}
        width={634}
        footer={null}
        onCancel={() => {
          setVisible(false);
        }}>
        <QrAddUser
          setVisible={setVisible}
          addUser={addUser}
          getAddUser={getAddUser}
          userType={userType}
        />
      </Modal>
    </div>
  );
};

export default QrUser;
